<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>未还图书</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	{% include 'public/static_top.html' %}
	<style type="text/css">
		.book_list_1 {
			margin-top: 50px;
		}
		.borrowed {
			float: right;
			color: red;
			font-weight: bold;
			font-size: 1.5em;
		}
        .qrcode {
            width: 80%;
        }
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="window.history.back(-1);"></a>
		<h1 class="mui-title">未还图书</h1>
	</header>
	
	<div class="book_list_1">
	<ul class="mui-table-view">
        {% for book in booklist %}
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="{{ book.book.cover.url }}">
				<div class="mui-media-body">
					{{ book.book.name }}
					<p class="mui-ellipsis">{{ book.book.author }} <span class="borrowed">{{ book.remain_time }}天内还</span></p>
					<p class='mui-ellipsis'>{{ book.borrow_time }}借</p>
				</div>
			</a>
		</li>
        {% endfor %}
		</ul>
	</div>

    {% if booklist %}
    <div class="mui-content-padded">
		<button type="button" class="mui-btn mui-btn-block mui-btn-primary" id="scanCode" data-loading-text="正在生成中...">生成还书二维码</button>
	</div>
    {% endif %}

	{% include 'public/static_bottom.html' %}
	<script type="text/javascript">
		mui.init();
        document.querySelector("button#scanCode").addEventListener('click', function () {
            mui("button#scanCode").button("loading");
            mui.alert("<img class='qrcode' src={{ url('user:return_qrcode', args=(user_id, )) }} />", '还书二维码');
            mui("button#scanCode").button("reset");
        })
	</script>
</body>

</html>